<template>
    <view class="header" :style="{ backgroundColor: bgColor }">
        <!-- 不滚动 -->
        <view v-if="!isScroll" class="navbar" :class="customClass">
            <view class="status"></view>
            <view v-if="navtype === 'default'" class="custom-bar">
                <slot name="header"></slot>
            </view>
            <view v-else>
                <slot name="header"></slot>
            </view>
        </view>
        <!-- 滚动变色 -->
        <view v-else class="navbar">
            <view class="status"></view>
            <view v-if="navtype === 'default'" class="custom-bar">
                <slot name="header"></slot>
            </view>
            <view v-else>
                <slot name="header"></slot>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { useSystemStore } from "@/store/module/system";
import type { navigationType } from "@/types/global";

interface navBarProps {
    navtype: navigationType; // 导航栏类型
    customClass?: string; // 自定义类名
    isScroll?: boolean; // 是否滚动变色
    bgColor?: string; // 滚动背景色
}

const props = withDefaults(defineProps<navBarProps>(), {
    navtype: "default",
    customClass: "",
    isScroll: false,
    bgColor: ""
});

const systemStore = useSystemStore();

const navHeight: string = systemStore.navHeight + "px";
const statusH: string = systemStore.statsuHeight + "px";
const customH: string = systemStore.customHeight + "px";
const customW: string = systemStore.customWidth;
</script>

<style lang="scss" scoped>
.header {
    width: 100%;
    height: v-bind(navHeight);
    position: sticky;
    z-index: 999;
    top: 0;
    left: 0;
}
.navbar {
    width: 100%;
    height: v-bind(navHeight);

    .status {
        width: 100%;
        height: v-bind(statusH);
    }

    .custom-bar {
        width: v-bind(customW);
        height: v-bind(customH);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>
